import React from 'react';
import {
  List, Avatar, Button
} from 'antd';
import { ApiOutlined, DoubleRightOutlined } from '@ant-design/icons';
import Dialog from '../../components/Dialog';
import FailFlowServerDetail from './detail';

function Info({ info }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <span>{`${info.remote_addr}${info.request_uri}`}</span>
      <span>{`${new Date(info.time).toLocaleString()}`}</span>
    </div>
  );
}

class FailFlowServer extends React.PureComponent {
  // 在不使用this时 创建方法为静态方法
  showModal = (item) => {
    Dialog({
      width: 1000,
      type: 'modal',
      title: '失败流量服务',
      content: <FailFlowServerDetail info={item} />
    });
  };

  render() {
    const { failFlow } = this.props;
    return (
      <List
        itemLayout="horizontal"
        dataSource={failFlow || []}
        bordered
        pagination={{ pageSize: 5, size: 'small' }}
        style={{ width: '100%', height: '100%' }}
        size="small"
        header={(
          <div style={{
            fontSize: '18px',
            fontWeight: 900
          }}
          >
            失败流量服务
          </div>
        )}
        renderItem={(item, index) => (
          <List.Item
            actions={[
              <Button
                type="link"
                size="small"
                onClick={() => this.showModal(item)}
                style={{
                  height: '18px',
                  lineHeight: '18px',
                  fontSize: '12px'
                }}
              >
                更多
              </Button>
            ]}
          >
            <List.Item.Meta
              key={index}
              avatar={<Avatar size={12} icon={<ApiOutlined />} />}
              description={<Info info={item} />}
            />
          </List.Item>
        )}
      />
    );
  }
}

export default FailFlowServer;
